/**
 * Created by Ysssssss on 2021/4/22.
 */

import React, { PureComponent } from 'react'
import {connect} from "react-redux";
import {withRouter} from "react-router-dom";
import PageBackHeader from "@common/PageBackHeader";
import ShoppingMallOrderDetailStatus from '@components/shoppingMall/ShoppingMallOrderDetailStatus'
import OrderDetailProductTable from "@common/presentational/OrderDetailProductTable";
import {STORAGE_STATUS} from "@constants/StorageStatus";
import {
    getShoppingMallOrderDetail
} from '@sagas/shoppingMall/shoppingMallOrder'
import {DELIVER_TYPE} from "@constants/DeliveryType";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {priceFenToYuan} from "@utils/priceConversion";

@connect(({ shoppingMallOrder }) => ({
    orderDetailMap: shoppingMallOrder.orderDetailMap
}), {
    getShoppingMallOrderDetail
})
@withRouter
class ShoppingMallOrderDetailPage extends PureComponent {
    constructor(props) {
        super(props);

        this.columns = [{
            title: '单价',
            dataIndex: 'price',
            key: 'price',
            render: text => `￥${priceFenToYuan(text)}`
        }, {
            title: '数量',
            dataIndex: 'quantity',
            key: 'quantity',
        }, {
            title: '优惠金额',
            dataIndex: 'discount',
            key: 'discount',
            render: text => `￥${priceFenToYuan(text)}`
        }, {
            title: '小计',
            dataIndex: 'trans',
            key: 'trans',
            render: text => `￥${priceFenToYuan(text)}`
        }, {
            title: '库存情况',
            dataIndex: 'storage_status',
            key: 'storage_status',
            render: (text, record) => text ? (
                STORAGE_STATUS[text]
                // <span className="can-click" onClick={() => this.showProductStorage(record, orderDetail)}>{ STORAGE_STATUS[text] }</span>
            ) : STORAGE_STATUS[text]
        }]
    }

    componentDidMount () {
        this.getOrderDetail()
    }

    getOrderDetail () {
        const { orderNumber } = getHistoryMatchParams(this.props)
        this.props.getShoppingMallOrderDetail({ orderNumber })
    }

    render () {
        const { orderDetailMap, history } = this.props
        const { orderNumber } = getHistoryMatchParams(this.props)
        const orderDetail = orderDetailMap[orderNumber] || null
        return orderDetail ? (
            <div className="bilin-web">
                <PageBackHeader title="订单详情" backUrl={history.location.query || "/shopping-mall/order"}/>
                <div className="bilin-web-body">
                    <div className="shopping-mall-order-detail">
                        <ShoppingMallOrderDetailStatus orderDetail={orderDetail} getOrderDetail={this.getOrderDetail.bind(this)}/>
                        <div className="detail-box flex-row-between flex-vertical-top">
                            <div className="max-w-quarter-2">
                                <div className="ft-clr-d ft-16">配货信息</div>
                                <div className="ft-clr-d mgt-24">
                                    <span>配送方式：</span>
                                    <span className="mgl-4">{ DELIVER_TYPE[orderDetail.deliver_type] }</span>
                                </div>
                                <div className="ft-clr-d mgt-16">
                                    <span>配货仓库：</span>
                                    <span className="mgl-4">{ orderDetail.warehouse_name }</span>
                                </div>
                            </div>
                                <div className="max-w-quarter-2">
                                    <div className="ft-clr-d ft-16">收货人信息</div>
                                    <div className="ft-clr-d mgt-24">
                                        <span>下单客户：</span>
                                        <span className="mgl-4">{ orderDetail.creator }</span>
                                    </div>

                                    {orderDetail.deliver_type === 0 ? (
                                        <div className="ft-clr-d mgt-16">
                                            <span>预约时间：</span>
                                            <span className="mgl-4">{ orderDetail.deliver_memo.deliver_time || '等待取货' }</span>
                                        </div>
                                    ) : (
                                        <div className="ft-clr-d mgt-16">
                                            <span>收货信息：</span>
                                            <span className="mgl-4">{ orderDetail.receiver },{orderDetail.address}</span>
                                        </div>
                                    )}
                                    <div className="ft-clr-d mgt-16">
                                        <span>客户备注：</span>
                                        <span className="mgl-4">{ orderDetail.remark || '--' }</span>
                                    </div>
                                </div>
                        </div>
                        <div className="detail-box">
                            <div className="ft-clr-d ft-16">订单信息</div>
                            <div className="mgt-36 mgb-36 flex-row-between flex-vertical-top">
                                <div>
                                    <span>订单编号：</span>
                                    <span className="mgl-4">{ orderDetail.order_number }</span>
                                </div>
                                <div>
                                    <span>交易流水号：</span>
                                    <span className="mgl-4">{ orderDetail.pay_order_number }</span>
                                </div>
                                <div>
                                    <span>支付方式 ：</span>
                                    <span className="mgl-4">{ orderDetail.pay_type_name	 }</span>
                                </div>
                            </div>
                            <OrderDetailProductTable
                                columns={this.columns}
                                detailList={orderDetail.details || []}
                            />
                            <div className="flex-row-right mgt-24" style={{height: 30}}>
                                <span className="ft-12 ft-clr-ml">商品小计：￥{priceFenToYuan(orderDetail.total)}</span>
                                <span className="ft-12 ft-clr-ml mgl-16">配送费：￥{priceFenToYuan(orderDetail.deliver_fee)}</span>
                                <span className="ft-12 ft-clr-ml mgl-16">优惠：￥{ priceFenToYuan(orderDetail.discount) }</span>
                                <span className="ft-12 ft-clr-d mgl-16 flex-center">
                                    <span>实付金额：</span>
                                    <span className="ft-18">￥{priceFenToYuan(orderDetail.trans)}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        ) : null
    }
}

export default ShoppingMallOrderDetailPage